<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .wrap {
        width: 200px;
        height: 200px;
        margin: 200px auto;
        /* 开启3D空间 */
        transform-style: preserve-3d;
        /* 开启景深(灭点) */
        perspective: 800px;
        position: relative;
        transform: rotateX(0deg);
    }

    .wrap>div {
        width: 200px;
        height: 200px;
        position: absolute;
    }

    img {
        width: 100%;
        height: 100%;

    }
</style>

<body>
    <!-- 9张图片 -->
    <div class="wrap">
        <div><img src="../img/1.jpg" alt=""></div>
        <div><img src="../img/2.jpg" alt=""></div>
        <div><img src="../img/3.jpg" alt=""></div>
        <div><img src="../img/4.jpg" alt=""></div>
        <div><img src="../img/5.jpg" alt=""></div>
        <div><img src="../img/6.jpg" alt=""></div>
        <div><img src="../img/7.jpg" alt=""></div>
        <div><img src="../img/8.jpg" alt=""></div>
        <div><img src="../img/9.jpg" alt=""></div>
    </div>
    <button class="autoChange">景深自动变换</button>
    <button class="autoZhuan">闰土转起来</button>
    <script>
        /* 一圈360   一共9  每一张图片的间隔 40 
            1 1  40*0
            1 2  40*1
            1 3  40*2
            1 4  40*3
            ...

            360/9 相当于 360/divArr.length * i
        
        
        */
        var divArr = document.querySelectorAll('.wrap>div');
        var autoChange = document.querySelector('.autoChange');
        var wrap = document.querySelector('.wrap');
        var autoZhuan = document.querySelector('.autoZhuan');
        // 让每一张图片的间隔都是40度  每一张图片向外打500px 形成了一个圆环
        for (var i = 0; i < divArr.length; i++) {
            divArr[i].style.transform = `rotateY(${360 / divArr.length * i}deg) translateZ(500px)`;
        }
        // 利用景深产生的特效
        autoChange.onclick = function () {
            wrap.style.perspective = '500px';
            var num = 500;
            setInterval(function () {
                num--;
                wrap.style.perspective = num + 'px';
            }, 20)
        }
        // 闰土转起来
        var num = 0;
        autoZhuan.onclick = function () {
            /* 闰土的每一张图片加某个角度 40 */
            num++;
            for (var i = 0; i < divArr.length; i++) {
                divArr[i].style.transition = '1s';
                divArr[i].style.transform = `rotateY(${(360 / divArr.length * i + 360 / divArr.length * num)}deg) translateZ(500px)`;
            }
        }
    </script>
</body>

</html>